<template>
	<view :class="[primarySize()]">
		<view class="container">
			<view class="ptb20 plr30">
				<view class="text_main">
					<view class="fs36 col0 fwb mb30">反馈意见</view>
					<textarea v-model="formData.content" maxlength="200" placeholder="你的每一个反馈对我们都很重要（篇幅请控制在200字内）"
						class="fs24 cold0"></textarea>
					<view class="clearfix">
						<view class="upload_img" v-for="(img,index) in images">
							<image :src="img" mode="aspectFit"></image>
							<view class="remove_img" @click="removeImage(index)">
								<image src="https://admin.mosizp.cn/static/public/pop_close.png"></image>
							</view>
						</view>
						<view class="upload_img" @click="chooseImages()">
							<image src="https://admin.mosizp.cn/static/public/icon_add2.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view class="contact_con">
					<view class="fs28 col9 mb30">请填写您的联系方式，以便我们及时回复</view>
					<input v-model="formData.contact" type="text" maxlength="50" placeholder="请输入"
						placeholder-class="col9"></input>
				</view>
				<view class="box">
					<view class="fs36 col0 mb30">反馈类型</view>
					<view class="clearfix type_main">
						<!-- <input hidden name="reason" value="reason" /> -->
						<view v-for="(item,index) in feedbackReasons" @click="bindSelectReason(index)"
							:class="[formData.reason===feedbackReasons[index].name?'active':'']">{{item.name}}</view>
					</view>
				</view>

				<view class="btn" @click="bindSubmit()">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	var validate = require("../../xilu/validate.js");
	export default {
		data() {
			return {
				
				feedbackReasons: [],
				maxImage: 5,
				images: [],
				formData: {
					content: '',
					contact: '',
					reason: ''
				}
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
			this.$core.get({
				url: 'xilujob.feedback/feedback_reasons',
				success: ret => {
					this.feedbackReasons = ret.data.feedback_reasons;
				}
			})
		},
		methods: {
			//上传轮播图
			chooseImages() {
				let page = this;
				let availableCount = page.maxImage - page.images.length;
				if (availableCount < 1) {
					uni.showToast({
						title: '最多5张图片',
						icon: 'none'
					});
					return;
				}
				uni.chooseImage({
					count: availableCount,
					success: res => {
						res.tempFiles.forEach(file => {
							// #ifdef H5
							page.$core.uploadFileH5({
								filePath: file.path,
								success: (ret, response) => {
									page.images.push(ret.data.url);
								}
							});
							//#endif
							//#ifdef MP-WEIXIN
							page.$core.uploadFile({
								filePath: file.path,
								success: (ret, response) => {
									page.images.push(ret.data.url);
								}
							});
							//#endif
						})
					}
				});
			},
			removeImage(index) {
				this.images.splice(index, 1);
			},
			bindSelectReason(index) {
				this.formData.reason = this.feedbackReasons[index].name;
			},
			bindSubmit() {
				let data = this.formData;
				var rule = [{
						name: 'content',
						rules: ['require'],
						errorMsg: {
							require: '请填写反馈内容'
						}
					},
					{
						name: 'contact',
						rules: ['require'],
						errorMsg: {
							require: '请填写联系方式'
						}
					},
					{
						name: 'reason',
						rules: ['require'],
						errorMsg: {
							require: '请选择反馈类型'
						}
					},
				];
				// 是否全部通过，返回Boolean
				if (!validate.check(data, rule)) {
					uni.showToast({
						title: validate.getError()[0],
						icon: 'none'
					});
					return;
				}
				data.images = this.images.join(',');
				this.$core.post({
					url: 'xilujob.feedback/feedback',
					data: data,
					success: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg || '感谢您的反馈',
							showCancel: false,
							success() {
								uni.navigateBack();
							}
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload_img {
		width: 100rpx;
		height: 100rpx;
		margin-left: 60rpx;
	}

	.upload_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.upload_img {
		float: left;
		margin-right: 30rpx;
		margin-left: 0;
		position: relative
	}

	.remove_img {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: -10rpx;
		right: -10rpx;
	}

	.cold7 {
		color: #d7d7d7
	}

	.text_main {
		margin: 0 0 20rpx;
		padding: 20rpx;
		background: #FFF;
		border-radius: 16rpx;
		box-sizing: border-box;
	}

	.text_main textarea {
		font-size: 24rpx;
		width: 100%;
		height: 260rpx;
	}

	.contact_con {
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.contact_con input {


		font-size: 30rpx;
		color: #333;
		line-height: 42rpx;

	}

	.box {
		padding: 30rpx;
		margin: 0 0 60rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}

	.type_main view {
		padding: 0 30rpx;
		border-radius: 50rpx;
		line-height: 58rpx;
		min-width: 160rpx;
		background-color: #F4F4F4;
		color: #666666;
		font-size: 24rpx;
		text-align: center;
		float: left;
		margin-right: 38rpx;
		box-sizing: border-box;
		margin-bottom: 25rpx;
	}

	.type_main .active {
		background-color: var(--primary);
		color: #fff;
	}

	.btn {
		margin: 0 auto;
		background: var(--primary);
		border-radius: 4rpx;
		border: 0;
		height: 82rpx;
		line-height: 82rpx;
		font-size: 28rpx;
		color: #fff;
		text-align: center;
	}
</style>